<template>
    <el-dialog v-model="showDialog" draggable :close-on-click-modal="false" :destroy-on-close="true" :class="{'w-h-100': isFullScreen, }">
        <template #header>
            <div style="color: #fff" class="header">
                <div>
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle">
                        <ele-Document />
                    </el-icon>
                    <span>{{  title }}</span>
                </div>
                <el-icon size="14"  class="fullIcon" @click="isFullScreen = !isFullScreen">
                    <ele-FullScreen />
                </el-icon>
            </div>
        </template>
        <div style="" class="des-content">
            <el-descriptions :column="column">
                <el-descriptions-item :label="item.label"  v-for="(item, index) in description" :key = "index" v-if="description != null"
                    style="margin: 5px 0;" width="50%">
                    <template #label>
                        <div class="w-h-100 hr-flex-start" style="padding: 0 10px;min-height: 30px;">
                            <div style="padding-right: 10px;min-width: 100px; text-align: right;" >
                                <span v-html="insertBr(item.label)" class="label" style="line-height: 20px;"></span>:
                            </div>
                            <div style="color: #666" class="w-h-100 flex-1 pos-r">
                                <template v-if="item.slotName">
                                    <div class="w-100 content-border" style="min-height: 30px;">
                                        <slot :name="item.slotName" :data="data[item.key]"></slot>
                                    </div>
                                   
                                </template>
                                <template v-else>
                                    <div class="w-100 content-border" style="min-height: 30px;">
                                        {{ data[item.key] }}
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>
                </el-descriptions-item>
            </el-descriptions>
            <slot :default="data"></slot>
        </div>
    </el-dialog>
</template>
<script lang="ts">
    import { defineComponent, PropType, reactive, toRefs } from 'vue';
    import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
    const { proxy } = useCurrentInstance();
    const $t = proxy.$t;
    export default defineComponent({
        props: {
            column: {
                type: Number,
                default: 2,
            },
            title: {
                type: String,
                default: $t('krTHz2Gx2u7DTdIjyJh9')
            }
        },
        setup () {
            const state = reactive({
                showDialog: false,
                isFullScreen: false,
                description: [] as any[],
                data: {} as any
            })

            const open = (data: any, des: any) => {
                state.isFullScreen = false
                state.showDialog = true
                state.description = des
                state.data = data
            }
            const fullAction = () => {

            }
            const insertBr = (val: string) => {
                // if (val.length>5) {
                //     let valArr: string[] = val.split('')
                //     valArr.splice(5, 0, '<br/>')
                //     return valArr.join('')
                // } else {
                //     return val
                // }
                return val
            }
            return {
                ...toRefs(state),
                open,
                fullAction,
                insertBr,
            }
        }
    })
</script>

<style lang="scss" scoped>
    .fullIcon {
        cursor: pointer;
        :hover {
            color: #f46c6c;
        }
        padding: 3px;
        box-sizing: content-box;
        position: absolute;
        top: 11px;
        right: 55px;
    }
    .label {
        // width: 40px;
        // text-align: justify;
        // text-align-last: justify;
        // display: inline-block;
        // word-break: break-all;
        // text-justify: distribute;
        // position: relative;
        // padding-right: 8px;
        // font-weight: bold;
        font-size: 14px;
        text-align: center;
    }
    .des-content {
        :deep(.el-descriptions__cell) {
            line-height: 0;
        }
    }
    .content-border {
        border: solid 1px var(--el-border-color);
        padding: 0 10px;
        border-radius: 5px;
        line-height: 30px;
    }
</style>